<template>
    <div ref="container" class="container" :style="{
        overflowY: 'auto',
        height: `${containerHeight}px`,
        position: 'relative',
        backgroundColor: '#f9f9f9'
    }" @scroll="handleScroll">
        <!-- 占位元素，用于撑开滚动条 -->
        <div :style="{ height: `${itemHeight * props.list.length}px` }"></div>
        <!-- 可视区域，通过 transform 偏移 -->
        <div ref="vlist" :style="{
            position: 'absolute',
            top: '0',
            left: '0',
            right: '0',
            transform: `translateY(${offset}px)`,
            backgroundColor: '#fff',
            boxShadow: '0 0 8px rgba(0,0,0,0.05)'
        }">
            <ul style="list-style: none; padding: 0; margin: 0">
                <li v-for="(item, index) in dataList" :key="index"
                    :style="{ 
                        height: `${itemHeight}px`, 
                        padding: '10px 15px', 
                        borderBottom: '1px solid #eee',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        transition: 'all 0.2s ease'
                    }"
                    @mouseenter="() => hoverIndex = index"
                    @mouseleave="() => hoverIndex = -1"
                    :class="{ hover: hoverIndex === index }"
                >
                    <div style="display: flex; gap: 10px; align-items: center;">
                        <span style="color: #333; font-size: 14px; font-weight: 500">{{ item.name }}</span>
                        <span style="color: #666; font-size: 14px">{{ item.one }}</span>
                        <span style="color: #666; font-size: 14px">{{ item.tow }}</span>
                        <span style="color: #666; font-size: 14px">{{ item.thre }}</span>
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button 
                            v-delete 
                            :style="{
                                padding: '4px 12px',
                                border: '1px solid #ff4d4f',
                                backgroundColor: '#fff',
                                color: '#ff4d4f',
                                borderRadius: '4px',
                                cursor: 'pointer',
                                transition: 'all 0.2s ease',
                                '&:hover': {
                                    backgroundColor: '#ff4d4f',
                                    color: '#fff'
                                }
                            }"
                        >删除</button>
                        <button 
                            v-update
                            :style="{
                                padding: '4px 12px',
                                border: '1px solid #1890ff',
                                backgroundColor: '#fff',
                                color: '#1890ff',
                                borderRadius: '4px',
                                cursor: 'pointer',
                                transition: 'all 0.2s ease',
                                '&:hover': {
                                    backgroundColor: '#1890ff',
                                    color: '#fff'
                                }
                            }"
                        >修改</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import _ from 'lodash'

const props = defineProps<{
    list: { name: string; one: string; tow: string; thre: string }[] // 修正 props 类型定义，适配实际数据结构
}>()

const container = ref<HTMLDivElement | null>(null)
const vlist = ref<HTMLDivElement | null>(null)
const containerHeight = ref(0)
const itemHeight = 60// 列表元素的高度
const startIndex = ref(0) // 截取开始的索引
const endIndex = ref(0)  // 截取结束的索引，计算出来， 容器的高度/ 单条数据的高度 + startIndex
const pageItems = ref(0)
const offset = ref(0)
const hoverIndex = ref(-1) // 用于控制鼠标悬停样式

const handleScroll = _.throttle(() => {
    if (!container.value) return

    const scrollTop = container.value.scrollTop
    const newStartIndex = Math.floor(scrollTop / itemHeight)

    // 限制 startIndex 在合理范围内
    startIndex.value = Math.max(0, newStartIndex)
    endIndex.value = Math.min(startIndex.value + pageItems.value, props.list.length)
    if (endIndex.value < props.list.length - 1) {
        endIndex.value += 1;
    }

    // 更新偏移量
    offset.value = startIndex.value * itemHeight
}, 16) // 使用 16ms（约 60fps）的节流时间

onMounted(() => {
    if (container.value) {
        containerHeight.value = container.value.parentElement?.offsetHeight as number
        pageItems.value = Math.ceil(containerHeight.value / itemHeight)
        endIndex.value = pageItems.value
    }
})

const dataList = computed(() => props.list.slice(startIndex.value, endIndex.value + 1))
</script>

<style scoped>
/* 滚动条整体样式 */
.container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 滚动条轨道 */
.container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 4px;
}

/* 滚动条滑块 */
.container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* 滚动条滑块 hover 效果 */
.container::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* 列表项样式 */
li {
    box-sizing: border-box;
}

/* 鼠标悬停样式 */
li.hover {
    background-color: #f5f7fa;
    transform: translateX(2px);
}

/* 按钮通用样式优化（也可通过内联 style 或单独 class 进一步拆分） */
button {
    outline: none;
}
button:hover {
    opacity: 0.9;
}
</style>